<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ include file="../../../inc/global.jsp" %>
<!doctype html>
<html>
<head>
<title><fmt:message key="jsp.title.mall.admin.product.item.spu"/></title>
<%@ include file="../head.jsp" %>
<style type="text/css">
    .selector-option ul li {
        cursor: pointer;
        display: inline-block;
        margin: 3px 3px;
    }

    .selector-option ul li {
        padding: 0px 11px;
    }

    .letter-brand {
        width: 100%;
    }

    .letter-brand:after {
        content: '.';
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
    }

    .letter-brand ul li.mouseover, .letter-brand ul li.slt, .selector-options li.mouseover, .selector-options li.slt {
        background: #ff6600;
        color: #fff;
    }

    .letter-brand ul li {
        cursor: pointer;
        font-weight: bold;
        float: left;
        border: 1px solid #eee;
        background: #ddd;
        display: inline-block;
        margin: 5px 1px;
        padding: 1px 8px;
    }

</style>
<script type="text/javascript">
function Selector() {
    var _this = this;
    this.getAttrs = function (navId, spuId) {
        if (spuId == undefined) {
            spuId = '';
        }
        $.ajax({
            url: ("/mall/ajax/item/nav/attrs?navId=" + navId + '&spuId=' + spuId),
            type: 'GET',
            success: function (data) {
                $('#attrs').html(data);
                var vals = $('#checkedVals').html();
                if (undefined != vals && vals.length > 0) {
                    var array = vals.split(',');
                    for (var i = 0; i < array.length; i++) {
                        var id = array[i].trim();
                        if (id.length > 0) {
                            $('#' + id).attr('checked', 'checked');
                        }
                    }
                }
            }
        });
    };
    this.init = function () {
        var ss = $('span[class^="selector"]');
        var len = ss.length;
        for (var i = 0; i < len; i++) {
            var s = ss[i];
            $(s).click(function () {
                var _this_s = $(this);
                var id = $(_this_s).attr('id');
                var o = "#" + id + "-option";
                $(_this_s).css({'z-index': '10000'});
                $(_this_s).find('a').addClass('show');
                $(o).dialog({
                    autoOpen: false,
                    closeText: "关闭",
                    closeOnEscape: true,
                    position: { my: "left top", at: "left bottom+6", of: ($(_this_s))},
                    minWidth: 300,
                    maxWidth: 1000,
                    maxHeight: 600,
                    width: 900,
                    beforeClose: function (event, ui) {
                        $(_this_s).css({'z-index': '1'});
                        $(_this_s).find('a').removeClass('show');
                    },
                    show: {
                        effect: "blind",
                        duration: 300
                    },
                    open: function (event, ui) {
                        var url = $(_this_s).find('a').attr('href');
                        $.ajax({
                            url: url,
                            type: 'GET',
                            success: function (data) {
                                $(o).html(data);
                                if (id == 'selector-2') {
                                    bindBrandSelectorOptionEvents(o);
                                }
                                else if (id == 'selector-1') {
                                    bindNavSelectorOptionEvents(o);
                                }
                            },
                            error: function () {
                                alert(MSG.AJAX_ERR);
                            }
                        });
                    }
                });
                var isOpen = $(o).dialog('isOpen');
                if (isOpen) {
                    $(o).dialog('close');
                    return false;
                } else {
                    $(o).dialog('open');
                }
                return false;
            });
        }
    };
    function bindBrandSelectorOptionEvents(o) {
        $('.letter-brand li').mouseover(function () {
            $(this).addClass('mouseover');
        }).mouseout(function () {
            $(this).removeClass('mouseover');
        }).click(function () {
            var q = $(this).attr('id');
            if ('*' == q) {
                q = '';
            }
            $.ajax({
                url: ("/mall/item/brand/options?q=" + q),
                type: 'GET',
                success: function (data) {
                    $(o).html(data);
                    bindBrandSelectorOptionEvents(o);
                }
            });
        });
        $('#brand-options li').mouseover(function () {
            $(this).addClass('mouseover');
        }).mouseout(function () {
            $(this).removeClass('mouseover');
        }).click(function () {
            var name = $(this).text();
            var id = $(this).attr('id');
            $('#selector-2').html('<a href="/mall/item/brand/options">' + name + '</a>');
            $('#selector-2-val').val(id);
            $(o).dialog('close');
        });
        $(window).resize(function () {
            $(o).dialog({
                position: { my: "left top", at: "left bottom+6", of: ($("#selector-2"))}
            });
        });
    }

    function bindNavSelectorOptionEvents(o) {
        $('#nav-options li').mouseover(function () {
            $(this).addClass('mouseover');
        }).mouseout(function () {
            $(this).removeClass('mouseover');
        }).click(function () {
            var name = $(this).text();
            var id = $(this).attr('id');
            $('#selector-1').html('<a href="/mall/item/nav/options">' + name + '</a>');
            $('#selector-1-val').val(id);
            $(o).dialog('close');
            _this.getAttrs(id);
        });
        $(window).resize(function () {
            $(o).dialog({
                position: { my: "left top", at: "left bottom+6", of: ($("#selector-1"))}
            });
        });
    }
}
var selector = new Selector();
$(function () {
    selector.init();
    //rc.radio($('#aaa'));
    $("#name")
        // don't navigate away from the field on tab when selecting an item
            .bind("keydown", function (event) {
                if (event.keyCode === $.ui.keyCode.TAB &&
                        $(this).data("ui-autocomplete").menu.active) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                create: function () {

                },
                source: function (request, response) {
                    $.ajax({
                        url: "/mall/ajax/item/search",
                        type: "GET",
                        dataType: "html",
                        data: {
                            r: 123123,
                            q: request.term
                        },
                        success: function (data) {
                            var json = $.parseJSON(data);
                            response($.map(json.data, function (item) {
                                return {
                                    label: (item.brandName + item.categoryName + item.name),
                                    value: (item.name),
                                    name: item.name,
                                    displayName: item.displayName,
                                    brandName: item.brandName,
                                    brandId: item.brandId
                                }
                            }));
                        },
                        error: function () {
                            alert('error');
                        }
                    });

                },
                minLength: 3,
                /*focus: function() {
                 // prevent value inserted on focus
                 return false;
                 },*/
                select: function (event, ui) {
                    $('#name').val(ui.item.name);
                    $('#displayName').val(ui.item.displayName);
                    $('#selector-1-val').val(ui.item.categoryId);
                    $('#selector-2-val').val(ui.item.brandId);
                    $('#selector-1 a').html(ui.item.categoryName);
                    $('#selector-2 a').html(ui.item.brandName);
                    return false;
                }
            });
    // 如果是修改商品信息初始化默认数据
    var brandId = $('#selector-2-val').val();
    var navId = $('#selector-1-val').val();
    if (brandId != undefined && brandId.length > 0) {
        $.ajax({
            type: 'POST',
            url: '/mall/ajax/getBrand?id=' + brandId,
            success: function (data) {
                var json = $.parseJSON(data);
                $('#selector-2 a').html(json.data.name);

            }, error: function () {
                alert(MSG.AJAX_ERR);
            }
        });
    }
    if (navId != undefined && navId.length > 0) {
        $.ajax({
            type: 'POST',
            url: '/mall/ajax/getNav?id=' + navId,
            success: function (data) {
                var json = $.parseJSON(data);
                $('#selector-1 a').html(json.data.name);
                selector.getAttrs(navId, '${spu.id}');
            }, error: function () {
                alert(MSG.AJAX_ERR);
            }
        });
    }
    $('#save').click(function () {
        var name = $('#name').val();
        var displayName = $('#displayName').val();
        var details = $('#details').html();
        var navId = $('#selector-1-val').val();
        var brandId = $('#selector-2-val').val();
        var vals = new Array();
        $('#attrs').find('input[type=checkbox]:checked').each(function () {
            vals.push($(this).val());
        });
        $('#attrs').find('input[type=radio]:checked').each(function () {
            vals.push($(this).val());
        });
        /*if(vals.length > 0) {
         for(var i=0; i<vals.length; i++) {
         alert(vals[i]);
         }
         }*/
        //alert(vals.length);
        $.ajax({
            url: '/mall/ajax/adm/item/spu/save',
            type: 'POST',
            data: {
                'id': $('#id').val(),
                'name': name,
                'displayName': displayName,
                'details': details,
                'navId': navId,
                'brandId': brandId,
                'vals': vals
            },
            traditional: true,
            success: function (data) {
                var json = $.parseJSON(data);
                if (json.succeed) {
                    ButtonConfirmDialog(MSG.SUCCEED);
                } else {
                    ButtonConfirmDialog(json.msg);
                }
            },
            error: function () {
                ButtonConfirmDialog(MSG.AJAX_ERR);
            }
        });
    });
    $(window).resize(function () {
        $("#dialog-confirm").dialog({
            position: { my: "left buttom", at: "left top-80", of: ($('#save'))}
        });
    });
});// all ready
function ButtonConfirmDialog(text) {
    $("#dialog-confirm").dialog({
        resizable: false,
        height: 140,
        width: 380,
        modal: true,
        closeText: "关闭",
        closeOnEscape: true,
        position: { my: "left buttom", at: "left top-80", of: ($('#save'))},
        buttons: {
            "继续添加": function () {
                $(this).dialog('close');
            },
            "返回商品管理": function () {
                window.location = "/mall/adm/product/items";
            }
        }
    }).html(text);
}
</script>
</head>
<body>
<div id="dialog-confirm">

</div>
<div class="main">
    <div class="wrapper">
        <%@include file="../../header.jsp" %>
        <%@include file="../sidebar.jsp"%>
        <!-- sidebar end -->
        <div class="content item-form">
            <div class="menu-tab">
                <ul>
                    <li><a href="/mall/adm/product/items">商品管理</a></li>
                    <li class="slt"><a href="/mall/adm/product/item/create">商品录入</a></li>
                </ul>
            </div>
            <table>
                <tr>
                    <th>产品型号/标准名称</th>
                    <td><input type="text" id="name" name="name" value="${spu.name}"/></td>
                </tr>
                <tr>
                    <th>商品展示名称</th>
                    <td><input type="text" id="displayName" name="displayName" value="${spu.displayName}"/></td>
                </tr>
                <tr>
                    <th><fmt:message key="message.brand"/></th>
                    <td>
                        <span class="selector" id="selector-2"><a href="/mall/item/brand/options">选择品牌</a></span>

                        <div class="selector-option" id="selector-2-option"><fmt:message
                                key="message.data.loading"/></div>
                        <input type="hidden" id="selector-2-val" value="${brand.id}"/>
                    </td>
                </tr>
                <tr>
                    <th><fmt:message key="message.category"/></th>
                    <td>
                        <span class="selector" id="selector-1"><a href="/mall/item/nav/options">选择分类</a></span>

                        <div class="selector-option" id="selector-1-option"><fmt:message
                                key="message.data.loading"/></div>
                        <input type="hidden" id="selector-1-val" value="${currentNav.id}"/>
                    </td>
                </tr>
                <tr>
                    <th valign="top">商品属性/详细参数</th>
                    <td>
                        <div id="attrs" class="attrs">
                        </div>
                    </td>
                </tr>
                <tfoot>
                <tr>
                    <th></th>
                    <td>
                        <input type="button" id="save" value="<fmt:message key="message.button.sure.save"/>"/>
                        <input type="hidden" id="id" value="${spu.id}"/>
                        <div id="checkedVals" style="display:none"><c:forEach var="item" items="${attrValList}">${item.id},</c:forEach></div>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
</body>
</html>